<template>
  <x-layout-main>
    <template #header>
      <n-tabs v-model:value="templateType" size="small" type="card" @before-leave="changeTemplateType">
        <template #suffix>
          <x-button
            v-auth="['腾讯广告3.0-批量新建']"
            style="margin-right: 10px"
            type="primary"
            size="small"
            @click.stop="handleCreateMore"
            >批量新建</x-button
          >
          <x-date-picker-actions v-model:value="dateRange" type="daterange" size="small" clearable :max-day="31" />
        </template>
        <n-tab-pane :name="1" tab="媒体账户"> </n-tab-pane>
        <n-tab-pane :name="2" tab="广告"> </n-tab-pane>
        <n-tab-pane :name="3" tab="创意"> </n-tab-pane>
      </n-tabs>
    </template>
    <div style="position: relative">
      <AccountTable v-if="templateType === 1" :date-range="dateRange" />
      <AdgroupTable v-if="templateType === 2" :date-range="dateRange" />
      <MediaTable v-if="templateType === 3" :date-range="dateRange" />
    </div>
  </x-layout-main>
</template>

<script setup lang="ts">
  import { formatDate } from '@/utils'
  import { ref, computed, h, onMounted } from 'vue'
  import { XForm, XButton, XDataTable, XLayoutMain, XDiyColumnDraggable, XDatePickerActions } from '@/components'
  import { NFormItem, NSelect, NText, NInput, NSpace, NTabs, NTabPane, useMessage } from 'naive-ui'
  import AddDominantEdit from '@/views/advertising/components/AddDominantEdit.vue'
  import { useRouter, useRoute } from 'vue-router'
  import { useStore } from '@/store'
  import AccountTable from '@/views/advertising/components/AccountTable.vue'
  import AdgroupTable from '@/views/advertising/components/AdgroupTable.vue'
  import MediaTable from '@/views/advertising/components/MediaTable.vue'
  const router = useRouter()
  const route = useRoute()
  const store = useStore()
  const message = useMessage()
  const templateType = ref(route.query.templateType || 1)
  const dateRange = ref([Date.parse(new Date()), Date.parse(new Date())])

  const draftList = ref([])

  onMounted(() => {
    if (route.query.templateType) {
      templateType.value = +route.query.templateType
    }
    getDraftList()
  })
  // 获取草稿箱数据
  async function getDraftList() {
    const { data } = await store.dispatch('intelligent/adgroupBatchList')
    draftList.value = data || []
  }
  const changeTemplateType = (val: any) => {
    router.push({
      name: 'Dashboard',
      query: {
        templateType: val
      }
    })
  }
  const handleCreateMore = () => {
    // 如果草稿箱有内容，跳转草稿箱
    if (draftList.value.length > 0) {
      router.push({
        name: 'Draft'
      })
    } else {
      // 否则跳转到新建广告
      router.push({
        name: 'AdsCreate'
      })
    }
  }
</script>

<style lang="scss" scoped>
  .m-dashboard {
    height: calc(100vh - 70px);
    .help {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 90px;
      height: 90px;
      color: #ffffff;
      border-radius: 4px;
      margin: 10px;
      background: url('../../assets/images/help-2.png') no-repeat left,
        url('../../assets/images/help-1.png') no-repeat 85% / auto 100%, linear-gradient(90deg, #717aff, #5a67ff);
      cursor: pointer;

      .title {
        font-size: 20px;
        margin-bottom: 5px;
        font-weight: 600;
      }
    }
    .welcome {
      padding-top: 250px;
      text-align: center;
      font-size: 40px;
    }
  }
</style>
